<template>
  <div>
      <div class="filter-container">
         <el-form ref="form" :model="form" label-width="100px">
                <el-row :gutter="30" >
                  <el-col :span="8" :offset="2">
                    <el-form-item label="订单编号">
                      <el-input v-model="transportOrder.orderId" disabled></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8" :offset="2">
                    <el-form-item label="运单编号">
                      <el-input v-model="transportOrder.transportOrderId" disabled></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="30" >
                  <el-col :span="8" :offset="2">
                    <el-form-item label="下单时间">
                      <el-input v-model="transportOrder.orderDTO.createTime" disabled></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8" :offset="2">
                    <el-form-item label="订单状态">
                      <el-input v-model="transportOrder.orderDTO.status" disabled></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="30" >
                  <el-col :span="8" :offset="2">
                    <el-form-item label="预计到达时间">
                      <el-input v-model="transportOrder.planArrivalTime" disabled></el-input>
                    </el-form-item>
                  </el-col>

                </el-row>
            </el-form>
      </div><br/>
      <div  class="filter-container">
        <h3>基本信息</h3>
        <div>
          <h4>发货方</h4>
          <el-form ref="form" :model="form" label-width="100px">
                <el-row :gutter="30" >
                  <el-col :span="8" :offset="2">
                    <el-form-item label="发货方姓名">
                      <el-input v-model="transportOrder.orderDTO.senderName" disabled></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8" :offset="2">
                    <el-form-item label="发货方地址">
                      <el-input v-model="transportOrder.orderDTO.senderProvinceId" disabled></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="30" >
                  <el-col :span="8" :offset="2">
                    <el-form-item label="发货方电话">
                      <el-input v-model="transportOrder.orderDTO.senderPhone" disabled></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8" :offset="2">
                    <el-form-item label="详细地址">
                      <el-input v-model="transportOrder.orderDTO.senderAddress" disabled></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>

            </el-form>
        </div>
        <div>
          <h4>收货方</h4>
          <el-form ref="form" :model="form" label-width="100px">
                <el-row :gutter="30" >
                  <el-col :span="8" :offset="2">
                    <el-form-item label="收货方姓名">
                      <el-input v-model="transportOrder.orderDTO.receiverName" disabled></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8" :offset="2">
                    <el-form-item label="收货方地址">
                      <el-input v-model="transportOrder.orderDTO.receiverProvinceId" disabled></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="30" >
                  <el-col :span="8" :offset="2">
                    <el-form-item label="收货方电话">
                      <el-input v-model="transportOrder.orderDTO.receiverPhone" disabled></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8" :offset="2">
                    <el-form-item label="详细地址">
                      <el-input v-model="transportOrder.orderDTO.receiverAddress" disabled></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>

            </el-form>
        </div>
        <div>距离：{{transportOrder.orderDTO.distance}}km 地图：<a href="#">查看地图</a></div>
      </div>
      <br/>
      <div style="font-weight:bold" class="filter-container">
        <h3>费用信息</h3>
                <el-row :gutter="30" >
                  <el-col :span="2" :offset="1">
                    <span>运费：</span>
                  </el-col>
                  <el-col :span="5">
                      <span>{{transportOrder.orderDTO.amount}}元</span>
                  </el-col>
                  <el-col :span="3" >
                    支付方式：
                  </el-col>
                  <el-col :span="5">
                      <span v-if="transportOrder.orderDTO.paymentMethod==1">预结</span>
                      <span v-if="transportOrder.orderDTO.paymentMethod==2">到付</span>
                  </el-col>
                  <el-col :span="3" >
                    付款状态：
                  </el-col>
                  <el-col :span="5">
                      <span v-if="transportOrder.orderDTO.paymentStatus==1">未付</span>
                      <span v-if="transportOrder.orderDTO.paymentStatus==2">已付</span>
                  </el-col>

                </el-row>
      </div>
      <br/>
      <div  class="filter-container">
        <h3>货品信息</h3>
        <el-table
            :data="orderCargoDto"
            stripe
            style="width: 100%">
            <el-table-column
              prop="id"
              label="编号"
              width="150">
            </el-table-column>
            <el-table-column
              prop="name"
              label="货品名称"
              width="100">
            </el-table-column>
            <el-table-column
              prop="quantity"
              width="80"
              label="货品数量">
            </el-table-column>
            <el-table-column
              prop="unit"
              label="货品单位">
            </el-table-column>
            <el-table-column
              label="货品类型">
              <template slot-scope="{row}">
                <span v-if="row.goodsTypeId==1">衣物</span>
                <span v-if="row.goodsTypeId==2">家具</span>
                <span v-if="row.goodsTypeId==3">生活用品</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="weight"
              label="重量(kg)">
            </el-table-column>
            <el-table-column
              prop="volume"
              label="体积(方)">
            </el-table-column>
            <el-table-column
              prop="cargoValue"
              label="货值">
            </el-table-column>
            <el-table-column
              prop="cargoBarcode"
              label="条形编码">
            </el-table-column>
            <el-table-column
              prop="remark"
              label="备注">
            </el-table-column>
          </el-table>
      </div>
      <br/>
      <div class="filter-container" style="font-weight:bold"  >
        <h3>取件信息</h3>
        <div v-if="transportOrder.orderDTO==null || transportOrder.orderDTO==''">
          暂无信息
        </div>

        <el-row :gutter="30" v-else>
            <el-col :span="3" >
              <span>所在网点：</span>
            </el-col>
            <el-col :span="3">
                <span>{{transportOrder.orderDTO.currentAgencyId}}</span>
            </el-col>
            <el-col :span="3" >
              取件类型：
            </el-col>
            <el-col :span="3">
                <span v-if="transportOrder.orderDTO.pickupType==1">网点自寄</span>
                <span v-if="transportOrder.orderDTO.pickupType==2">上门取件</span>
            </el-col>
            <el-col :span="3" >
              作业状态：
            </el-col>
            <el-col :span="3">
                <span v-if="transportOrder.taskPickupDTO.status==1">待取件</span>
                <span v-if="transportOrder.taskPickupDTO.status==2">进行中</span>
                <span v-if="transportOrder.taskPickupDTO.status==3">待确认</span>
                <span v-if="transportOrder.taskPickupDTO.status==4">已完成</span>
                <span v-if="transportOrder.taskPickupDTO.status==5">已取消</span>
            </el-col>
            <el-col :span="3" >
              取件快递员：
            </el-col>
            <el-col :span="3">
                <span>{{transportOrder.taskPickupDTO.courierId}}</span>
            </el-col>

          </el-row><br/>
          <el-row :gutter="30" >
            <el-col :span="3" >
              <span>快递员电话：</span>
            </el-col>
            <el-col :span="3">
                <span>{{transportOrder.orderDTO.amount}}</span>
            </el-col>
            <el-col :span="3" >
              预计取件时间:
            </el-col>
            <el-col :span="3">
                <span>{{transportOrder.taskPickupDTO.estimatedStartTime}}</span>

            </el-col>
            <el-col :span="3" >
              取件完成时间：
            </el-col>
            <el-col :span="3">
                <span>{{transportOrder.taskPickupDTO.actualEndTime}}</span>

            </el-col>
            <el-col :span="3" >
              实际取件时间：
            </el-col>
            <el-col :span="3">
              <span>{{transportOrder.taskPickupDTO.confirmTime}}</span>

            </el-col>

          </el-row>
      </div><br/>
      <div class="filter-container" style="font-weight:bold"  >
        <h3>派送信息</h3>
        <el-row :gutter="30" >
            <el-col :span="3" >
              <span>所在网点：</span>
            </el-col>
            <el-col :span="3">
                <span>{{transportOrder.taskDispatchDTO.agencyId}}</span>
            </el-col>

            <el-col :span="3" >
              作业状态：
            </el-col>
            <el-col :span="3">
                <span v-if="transportOrder.taskDispatchDTO.status==1">待取件</span>
                <span v-if="transportOrder.taskDispatchDTO.status==2">进行中</span>
                <span v-if="transportOrder.taskDispatchDTO.status==3">待确认</span>
                <span v-if="transportOrder.taskDispatchDTO.status==4">已完成</span>
                <span v-if="transportOrder.taskDispatchDTO.status==5">已取消</span>
            </el-col>
            <el-col :span="3" >
              派送快递员：
            </el-col>
            <el-col :span="3">
                <span>{{transportOrder.taskPickupDTO.courierId}}</span>
            </el-col>
            <el-col :span="3" >
              <span>快递员电话：</span>
            </el-col>
            <el-col :span="3">
                <span>{{transportOrder.orderDTO.amount}}</span>
            </el-col>

          </el-row><br/>
          <el-row :gutter="30" >

            <el-col :span="3" >
              预计派送时间:
            </el-col>
            <el-col :span="3">
                <span>{{transportOrder.taskPickupDTO.estimatedStartTime}}</span>

            </el-col>
            <el-col :span="3" >
              派件完成时间：
            </el-col>
            <el-col :span="3">
                <span>{{transportOrder.taskPickupDTO.actualEndTime}}</span>

            </el-col>


          </el-row>
      </div>
      <br/>
      <div class="filter-container" style="font-weight:bold"  >
        <h3>运输信息</h3>
        <table style="background-color: azure;" class="processing_content" width="100%" cellspacing="0" cellpadding="0" border="0">
          <tr>
            <td>
                      预计到达：
                    </td> <td>
                      新惠镇网点
                    </td></tr> <tr><td>
                      运输任务：
                    </td> <td class="num">
                      3093046779179893
                    </td></tr> <tr><td>
                      车辆：
                    </td> <td>
                      JY0006
                    </td></tr> <tr><td>
                      司机：
                    </td> <td>
                      司机001
                    </td></tr> <tr><td>
                      到达时间：
                    </td> <td>
                      2021-06-21 19:16:42
                    </td></tr></table>

      </div><br/>
      <div class="filter-container" style="font-weight:bold"  >
        <h3>订单轨迹</h3>

      </div>
  </div>
</template>

<script>
export default {
    data() {
      return {
        transportOrder:this.$route.query.data,
        orderCargoDto:[]
      }
    },
    methods:{
        initCargo(){
          this.orderCargoDto.push(this.transportOrder.orderCargoDto)
        }
    },
    mounted:function(){
        this.initCargo();
    }
}
</script>

<style>
a{

}

</style>
